<html>
    <head>
        <style type="text/css">
            .message{
                height: 50px;
            }
            .detail{
                margin-left: 10px;
            }
            input{
                display: block;
            }
            img{
                width: 40px;
                height: 50px;
            }
        </style>
        {% load static from staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'lost_and_found/index.css' %}">
    </head>
    <body>
        {% for message in message_list %}
        <div class="message red">
            {% if message.picture_file %}
            <img src="{{ message.picture_file.url }}"/>
            {% endif %}
            <span class="detail">{{ message.item_name }}</span>
            <span class="detail">{{ message.place }}</span>
            <span class="detail">{{ message.description }}</span>
            <span class="detail">{{ message.published_date }}</span>
        </div>
        {% endfor %}
        <a href="{% url 'lost_and_found:add_message' %}">add message</a>
    </body>
</html>
